<template>
  <div style="width: 100%">
    <div class="flex-between">
      <span class="c-title">{{ title }}</span>
      <el-radio-group size="mini" v-model="isXc_1" @change="xcHandle">
        <el-radio-button :label="true">信创</el-radio-button>
        <el-radio-button :label="false">非信创</el-radio-button>
      </el-radio-group>
    </div>
    <div class="flex-between">
      <div class="data-box" v-for="(e, i) in dataList" :key="i">
        <span>{{ e.name }}</span>
        <span class="num">{{ e.value || 0 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AdminBottombox",

  props: {
    cdata: {
      type: Object,
      default: () => ({
        title: "",
        xc: [
          {
            value: 0,
            name: "",
          },
          {
            value: 0,
            name: "",
          },
          {
            value: 0,
            name: "",
          },
          {
            value: 0,
            name: "",
          },
        ],
      }),
    },
  },

  data() {
    return {
      isXc_1: false,
      title: "",
      dataList: [],
    };
  },

  watch: {
    cdata(v) {
      this.dataInit(v);
    },
  },

  methods: {
    dataInit(d) {
      this.title = d.title;
      this.dataList = d.excd;
    },
    listInit(list) {
      this.dataList = list;
    },
    xcHandle(v) {
      if (v) this.listInit(this.cdata.xc);
      else this.listInit(this.cdata.excd);
    },
  },
};
</script>

<style lang="less" scoped>
.c-title {
  font-size: 16px;
  font-weight: 700;

  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 10px;
    background-color: #409eff;
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-box {
  height: 80px;
  margin: 20px 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & + .data-box {
    border-left: 0.5px solid #eee;
  }

  .num {
    font-size: 32px;
  }
}
</style>